<!DOCTYPE>
<html>
    <body>
        <div>
            <p>这是一个标题</p>
            <p>这也是一个标题</p>
            <div class="display-none">这是一个内联元素,不会显示出来</div>
        </div>
        <div>
            <span class="display-block">这是一个行内元素</span>
            <span class="display-block">这也是一个行内元素</span>
        </div>
        <div style="width: 500px;padding: 100px;border: 2px dotted black">
            <p>
                这是另一个很长的标题,很长很长的那种
                <img class="img" src="http://pic.uzzf.com/up/2017-2/14873018711362378.jpg" />
            </p>
        </div>
        <div>
            <br />
            <p><span class="span">这</span>是一个行内元素</p>
        </div>
        <ul class="ul">
            <li class="li"><a class="link" href="#">这是一个链接</a></li>
            <li class="li"><a class="link" href="#">这是另一个链接</a></li>
            <li class="li"><a class="link" href="#">这是第三个链接</a></li>
            <li class="li"><a class="link" href="#">嗯?咋还有一个</a></li>
        </ul>
        <div class="container">
            <div class="header">
                <h1 class="header">我是页面的额,emmmmmm............头</h1>
            </div>
            <div class="left">
                <p>这是页面左边的信息,很长的那种</p>
            </div>
            <div class="content">
                <h2>我是右边页面的标题</h2>
                <p>我是右边页面的段落,很长很长的那种</p>
                <p>我是右边页面的另一个段落,很长很长的那种</p>
            </div>
            <div class="footer">
                我是最底下那个毫无存在感的条
            </div>
        </div>
        <div>
            <h2 class="right">这是个相对定位的标题</h2>
            <h2 class="abs">这是个绝对定位的标题</h2>
            <p class="p">这是一个固定定位段落</p>
            <h1 class="visible">这是可见的标题</h1>
            <h1 class="invisible">这是不可见的标题</h1>
        </div>
        <table border="1">
            <tr>
                <td>11</td>
                <td>12</td>
            </tr>
                <tr class="box">
                <td>21</td>
                <td>22</td>
            </tr>
            <div>
                <p>好多指针变化</p>
                <span style="cursor:auto">
                Auto</span><br />
                <span style="cursor:crosshair">
                Crosshair</span><br />
                <span style="cursor:default">
                Default</span><br />
                <span style="cursor:pointer">
                Pointer</span><br />
                <span style="cursor:move">
                Move</span><br />
                <span style="cursor:e-resize">
                e-resize</span><br />
                <span style="cursor:ne-resize">
                ne-resize</span><br />
                <span style="cursor:nw-resize">
                nw-resize</span><br />
                <span style="cursor:n-resize">
                n-resize</span><br />
                <span style="cursor:se-resize">
                se-resize</span><br />
                <span style="cursor:sw-resize">
                sw-resize</span><br />
                <span style="cursor:s-resize">
                s-resize</span><br />
                <span style="cursor:w-resize">
                w-resize</span><br />
                <span style="cursor:text">
                text</span><br />
                <span style="cursor:wait">
                wait</span><br />
                <span style="cursor:help">
                help</span>
            </div>
        </table>
    </body>
</html>
<style>
    p {
        display: inline
    }
    .display-none {
        display: none
    }
    .display-block{
        display: block
    }
    .img {
        float: right;
        width: 150px;
        border: 1px dotted black;
        margin: 0px 0px 15px 20px;
    }
    .span{
        float: left;
        width: 1.2em;
        font-size: 150%;
        font-family: algerian,courier;
        line-height: 110%;
    }
    .ul{
        float: left;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    a{
        float: left;
        width: 7em;
        text-decoration: none;
        color: white;
        background-color: purple;
        padding: 0.2em 0.6em;
        border-right: 1px solid white;
    }
    a:hover {
        background-color:#ff3300
    }
    .ul .li {
        display: inline
    }
    div.container{
        width: 100%;
        margin: 0px;
        border: 1px solid gray;
        line-height: 150%;
    }
    div.header,div.footer{
        padding: 0.5em;
        color: white;
        background-color: gray;
        clear: left;
    }
    h1.header{
        padding: 0;
        margin: 0;
    }
    div.left{
        float:left;
        width: 160px;
        margin: 0;
        padding: 1em;
    }
    div.content{
        margin-left: 190px;
        border-left: 1px solid gray;
        padding: 1em;
    }
    h2.right{
        position: relative;
        left: 20px
    }
    h2.abs{
        position: absolute;
        right: 300px;
        top: 150px
    }
    p.p{
        position: fixed;
        top: 30px;
        right: 5px;
    }
    h1.visible {
        visibility: visible;
    }
    h1.invisible {
        visibility: hidden;
    }
    tr.box{
        visibility:collapse
    }
    img{
        float:left;
        clear:both;
    }
</style>